import QtQuick 2.6
import QtQuick.Layouts 1.3
import QtQuick.Controls 1.4
import QtQuick.Controls 2.0
import QtQuick.Controls.Styles.Flat 1.0 as Flat
import QtQuick.Extras 1.4
import QtQuick.Extras.Private 1.0
import QtGraphicalEffects 1.0
import QtQuick.Window 2.8

Rectangle {
    property int mainWidth:  Screen.width;//1440 / 1
    property int mainHeight: Screen.height; //3200 / 1

    property int mainMinSize: ((mainWidth < mainHeight)? mainWidth : mainHeight)

    property int buttonSize: ((mainWidth < mainHeight)? mainWidth : mainHeight) * 7 / 8 * 2 / 3
    property int imgSize: ((mainWidth < mainHeight)? mainWidth : mainHeight) * 7 / 8

    property int rowWidth: mainWidth * 7 / 8
    property int rowHeight: mainHeight * 7 / 8

    property var backgroundColor: "#011f26"
    property var foregroundColor: "#09c2f3"

    property int curSelect: device.curSelect
    property int pageSelect: device.state


    visible: true
    width: mainWidth
    height: mainHeight
    //title: qsTr("LED Ctrl Software")
    color: backgroundColor

    Connections {
        target: device
        onStateChanged: {
            if (device.state)
            {
                if (statchView.depth <= 1)
                    statchView.push(ctrlPage)

                console.log("device.state=true")
            }
            else
            {
                if (statchView.depth > 1)
                    statchView.pop()

                console.log("device.state=false")
            }
        }
    }


    StackView {
        id: statchView
        anchors.fill: parent
        initialItem: loginPage
    }

    Component {
        id: loginPage
        Item {
            anchors.fill: parent
            BusyIndicator {
                width: parent.width / 3
                height: parent.height / 3
                anchors.centerIn: parent
            }

//            Timer {
//                interval: 2000
//                repeat: true
//                running: (pageSelect == 0)
//                onTriggered: {
//                    statchView.push(ctrlPage)
//                    pageSelect = 1
//                }
//            }
        }
    }

    Component {
        id: ctrlPage
        Item {
            anchors.fill: parent


            Row {
                anchors.centerIn: parent
                width:  rowWidth
                height: rowHeight
                Rectangle {
                    width:  parent.width / 2
                    height: parent.height
                    color: backgroundColor
                    visible: mainWidth > mainHeight

                    Image {
                        anchors.centerIn: parent
                        width: imgSize
                        height: imgSize
                        source: "qrc:/new/prefix1/Img/1.png"
                    }
                }

                Column {
                    //anchors.centerIn: parent
                    width:  mainWidth < mainHeight? rowWidth : rowWidth / 2
                    height: rowHeight
                    Rectangle {
                        width:  parent.width
                        height: parent.height / 2
                        color: backgroundColor
                        visible: mainWidth < mainHeight

                        Image {
                            anchors.centerIn: parent
                            width: imgSize
                            height: imgSize
                            source: "qrc:/new/prefix1/Img/1.png"
                        }
                    }

                    Rectangle {
                        width:  parent.width
                        height: mainWidth < mainHeight? parent.height / 2 : parent.height
                        color: backgroundColor

                       Grid {
                            anchors.centerIn: parent

                            columns: 2
                            spacing: imgSize / 4 / 4

                            Repeater {
                                model: ["跑马灯1", "跑马灯2", "交错灯", "风车灯", "呼吸灯", "雷达灯"]

                                Item
                                {
                                    width: mainMinSize * 4 / 10
                                    height: mainMinSize * 2 / 5 / 2

                                    RectangularGlow {
                                        id: rectGlow
                                        width: parent.width - 20
                                        height: parent.height - 20
                                        anchors.centerIn: rect
                                        glowRadius: 10
                                        spread: 0.4
                                        color: foregroundColor
                                        cornerRadius: rect.radius + glowRadius
                                        opacity: (index == curSelect)

                                        Behavior on opacity {
                                            PropertyAnimation {
                                                duration: 150 // 动画持续时间，单位为毫秒
                                                easing.type: Easing.InOutQuad // 缓动函数
                                            }
                                        }
                                    }
                                    Rectangle {
                                        id: rect
                                        width: parent.width - 20
                                        height: parent.height - 20
                                        color: backgroundColor
                                        border.color: foregroundColor
                                        border.width: 2
                                        radius: height / 4

                                        Text {
                                            anchors.centerIn: parent
                                            text: modelData
                                            color: foregroundColor
                                            font.pointSize: 24
                                        }

                                    }

                                    MouseArea {
                                        anchors.fill: parent
                                        onClicked: {
                                            curSelect = index
                                            device.setCurSelect(index)
                                        }
                                    }
                                }
                            }
                       }

//                   Button {
//                       anchors.bottom: parent.bottom
//                       text: "返回"
//                       onClicked: {
//                           statchView.pop()
//                           pageSelect = 0
//                       }
//                   }
                    }
                }
            }
        }
    }
}
